<template>
	<div class="qrcode" v-show="qrcodeMask" @click.stop="qrcodeMask = false">
		<div class="qrcode_box" @click.stop="noClick">
			<div class="qrcode_close" @click.stop="qrcodeMask = false">
				<img class="qrcode_close_img" :src="constant.imgUrl + 'center/icon_close.png'" alt="">
			</div>
			<div class="qrcode_img">
				<img :src="qrCode" alt mode="widthFix" />
				<!-- #ifdef H5 -->
				<!-- <img :src="storeQrCode" alt mode="widthFix" /> -->
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<!-- <img v-if="storeQrCode" :src="storeQrCode" alt mode="widthFix" /> -->
				<!-- <canvas v-else class="canvas" :style="{width: qrcode_w + 'px', height: qrcode_w + 'px'}" :canvas-id="canvasId"></canvas> -->
				<!-- #endif -->
			</div>
			<!-- #ifdef H5 -->
			<div class="qrcode_remind">长按二维码，选择"保存图片"，或“发送朋友”</div>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<div class="btn_wrap">
				<button :plain="true" @click.stop="saveImage">
					<i class="iconfont iconbaocun" />
					<span>保存</span>
				</button>
				<button :plain="true" open-type="share">
					<i class="iconfont iconfenxiang" />
					<span>分享</span>
				</button>
			</div>
			<!-- #endif -->
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
// #ifdef H5
import QRCode from 'qrcode'
// #endif
// #ifdef MP-WEIXIN
import drawQrcode from 'weapp-qrcode'
// #endif
import { getUrlHref } from '@/utils/common'
export default {
	data() {
		return {
			constant: this.$constant,
			// 二维码
			qrcodeMask: false,
			storeQrCode: '',
			qrcode_w: 0,
			linkUrl: '',
			canvasId: 'codeCanvas',
			callback: res => {
				console.log('微信二维码', res)
				this.storeQrCode = res
			}
		}
	},
	props: {
		qrCode: {
			default: '',
			type: String
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	// created() {
	// 	if (this.userInfo) {
	// 		let str = this.userInfo.role_id == 1 ? 'company' : this.userInfo.role_id == 2 ? 'material' : 'person'
	// 		this.linkUrl = this.$constant.formal + `/hkds/#/${str}?owner_user_id=${this.userInfo.user_id}`
	// 	} else {
	// 		this.linkUrl = this.$constant.formal
	// 	}
	// },
	methods: {
		showMask() {
			this.qrcodeMask = true
			// #ifdef H5
			// this.generateQRcode().then(res => {
			// 	this.storeQrCode = res
			// 	this.qrcodeMask = true
			// })
			// #endif
			// #ifdef MP-WEIXIN
			// this.wxGenerateQRcode()
			// #endif
		},
		// 关闭弹窗
		hideMask() {
			this.qrcodeMask = false
		},
		/**
			 * 保存图片
			 * @parmas obj 传入的配置参数
			 */
		async saveImage() {
			uni.getImageInfo({
				src: this.qrCode,
				success: imgInfo => {
					uni.saveImageToPhotosAlbum({
						filePath: imgInfo.path,
						success: () => {
							uni.showToast({
								title: '已保存到相册',
								icon: 'success'
							})
						},
						fail: () => {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					})
				},
				fail: (e) => {
					console.log(e)
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				}
			})
		},
		/**
			 * H5生成二维码
			 * @parmas obj 传入的配置参数
			 */
		async generateQRcode(obj = { width: 200, margin: 2 }) {
			let option = {
				type: 'image/jpeg',
				width: obj.width,
				margin: obj.margin
			}

			let qrcodeUrl = null

			await QRCode.toDataURL(this.linkUrl, option)
				.then(url => {
					qrcodeUrl = url
				})
				.catch(err => {
					this.$toast('生成失败！')
					console.error(err)
				})

			return qrcodeUrl
		},
		/**
			 * 微信生成二维码
			 * @parmas obj 传入的配置参数
			 */
		async wxGenerateQRcode(obj = { width: 200 }) {
			this.qrcode_w = obj.width
			drawQrcode({
				_this: obj._this || this,
				width: obj.width,
				height: obj.width,
				canvasId: obj.canvasId ? obj.canvasId : this.canvasId,
				callback: this.canvasToTempFilePath(obj),
				// ctx: wx.createCanvasContext('myQrcode'),
				text: this.linkUrl
			})
		},
		/**
			 * 微信canvas转图片
			 * @parmas obj 传入的配置参数
			 */
		canvasToTempFilePath(obj) {
			setTimeout(() => {
				let that = obj._this || this
				uni.canvasToTempFilePath({
					width: obj.width,
					height: obj.width,
					destWidth: obj.width,
					destHeight: obj.width,
					canvasId: obj.canvasId ? obj.canvasId : this.canvasId,
					success: (res) => {
						if (obj.callback) {
							obj.callback(res.tempFilePath)
						} else {
							this.callback(res.tempFilePath)
						}
					},
					fail: function(e) {
						console.log('生成二维码图片失败！', e)
					}
				}, that)
			}, 100)
		},
		noClick() {}
	}
}
</script>

<style lang="scss" scoped>
	// 二维码弹窗
	.qrcode {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 200;
	}
	.qrcode_box {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		padding-top: 80px;
		width: 490px;
		height: 595px;
		background-color: #fff;
		border-radius: 15px;
		box-sizing: border-box;
	}
	.qrcode_close {
		position: absolute;
		right: 24px;
		top: 24px;
		width: 60px;
		height: 60px;
		@include direction(center, center);
		// background: url($imgUrl+'center/icon_close.png') center center / 100% 100% no-repeat;
		.qrcode_close_img {
			// margin: 5px;
			width: 30px;
			height: 30px;
		}
	}
	.qrcode_img {
		margin: auto;
		width: 400px;
		height: 400px;
	}
	.qrcode_attention {
		margin-top: 40px;
		font-size: 38px;
		color: #333;
		text-align: center;
	}
	.qrcode_remind {
		margin-top: 14px;
		font-size: 30px;
		color: #999;
		text-align: center;
	}
	.btn_wrap {
		margin-top: 30px;
		@include disFlexCen();
		button {
			@include direction(center, center);
			width: 50%;
			margin: 0;
			border-radius: 0;
			border-color: #ddd;
			font-size: 32px;
			text-align: center;
			border-bottom: none;
			.iconfont {
				margin-right: 10px;
			}
		}
		button:first-child {
			border-right: 0;
			border-bottom-left-radius: 15px;
		}
		button:last-child {
			border-bottom-right-radius: 15px;
		}
	}
</style>
